<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级质感博客系统 | 个人知识库</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --dark: #121212;
            --light: #f8f9fa;
            --accent: #ff6b6b;
            --card-bg: rgba(30, 30, 46, 0.6);
            --text-light: rgba(255, 255, 255, 0.85);
            --text-lighter: rgba(255, 255, 255, 0.7);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, var(--dark), #1a1a2e);
            color: var(--light);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 10% 20%, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.05) 100%);
            z-index: -1;
            animation: gradientShift 12s ease infinite;
            background-size: 200% 200%;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航样式 */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 0;
            position: relative;
            z-index: 100;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 800;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 1px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .logo:hover {
            transform: translateY(-3px);
            text-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            padding: 5px 0;
            transition: var(--transition);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover {
            color: #fff;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        /* 主内容区样式 */
        .hero {
            min-height: 85vh;
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .hero-content {
            max-width: 650px;
            position: relative;
            z-index: 10;
        }
        
        .hero h1 {
            font-size: 4.5rem;
            line-height: 1.1;
            margin-bottom: 20px;
            background: linear-gradient(45deg, var(--light), #d0d0e0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            overflow: hidden;
        }
        
        .hero h1 span {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
        
        .hero h1 span:nth-child(1) { animation-delay: 0.1s; }
        .hero h1 span:nth-child(2) { animation-delay: 0.3s; }
        .hero h1 span:nth-child(3) { animation-delay: 0.5s; }
        .hero h1 span:nth-child(4) { animation-delay: 0.7s; }
        .hero h1 span:nth-child(5) { animation-delay: 0.9s; }
        .hero h1 span:nth-child(6) { animation-delay: 1.1s; }
        
        .hero p {
            font-size: 1.3rem;
            margin-bottom: 30px;
            color: var(--text-light);
            line-height: 1.6;
            animation: fadeInUp 1s ease-out 1.4s forwards;
            opacity: 0;
        }
        
        .cta-buttons {
            display: flex;
            gap: 15px;
            animation: fadeInUp 1s ease-out 1.6s forwards;
            opacity: 0;
        }
        
        .btn {
            padding: 14px 32px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            font-size: 1.1rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            border: none;
            outline: none;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 10px 20px rgba(106, 17, 203, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(106, 17, 203, 0.4);
        }
        
        .btn-primary::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.6s ease;
            z-index: -1;
        }
        
        .btn-primary:hover::after {
            transform: rotate(45deg) translate(100%, 0);
        }
        
        .btn-secondary {
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        .btn-secondary::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: rgba(255,255,255,0.1);
            transition: height 0.4s ease;
            z-index: -1;
        }
        
        .btn-secondary:hover::after {
            height: 100%;
        }
        
        /* 博客列表样式 */
        .blog-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .blog-card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: var(--transition);
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            position: relative;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .blog-card:hover {
            transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .blog-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(106, 17, 203, 0.2), rgba(37, 117, 252, 0.1));
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 1;
        }
        
        .blog-card:hover::before {
            opacity: 1;
        }
        
        .card-image {
            height: 200px;
            background-size: cover;
            background-position: center;
            position: relative;
            transition: transform 0.5s ease;
        }
        
        .blog-card:hover .card-image {
            transform: scale(1.05);
        }
        
        .card-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to top, rgba(18, 18, 18, 0.9), transparent);
        }
        
        .card-content {
            padding: 20px;
            position: relative;
            z-index: 2;
        }
        
        .card-tag {
            display: inline-block;
            background: rgba(106, 17, 203, 0.3);
            color: #c792ea;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 10px;
            transition: var(--transition);
        }
        
        .blog-card:hover .card-tag {
            background: rgba(106, 17, 203, 0.5);
            transform: translateY(-3px);
        }
        
        .card-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: white;
            transition: var(--transition);
        }
        
        .blog-card:hover .card-title {
            color: var(--accent);
        }
        
        .card-excerpt {
            color: var(--text-lighter);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 15px;
            transition: var(--transition);
        }
        
        .blog-card:hover .card-excerpt {
            color: var(--text-light);
        }
        
        .card-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-lighter);
            font-size: 0.85rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 15px;
            transition: var(--transition);
        }
        
        .blog-card:hover .card-meta {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* 博客页面样式 */
        .blog-container {
            display: none;
            padding: 100px 0 80px;
            position: relative;
            z-index: 20;
            min-height: 100vh;
        }
        
        .back-btn {
            position: absolute;
            top: 30px;
            left: 20px;
            z-index: 30;
        }
        
        .blog-header {
            text-align: center;
            margin-bottom: 60px;
            padding: 0 20px;
        }
        
        .blog-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .blog-meta {
            color: var(--text-lighter);
            font-size: 1.1rem;
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 10px;
        }
        
        .blog-content {
            max-width: 800px;
            margin: 0 auto;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            line-height: 1.8;
            font-size: 1.1rem;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .blog-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .blog-content h2 {
            margin: 30px 0 15px;
            color: #fff;
            font-size: 1.8rem;
            position: relative;
            padding-left: 15px;
        }
        
        .blog-content h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 6px;
            height: 25px;
            background: var(--accent);
            border-radius: 3px;
        }
        
        .blog-content p {
            margin-bottom: 20px;
            color: var(--text-light);
        }
        
        .blog-content img {
            max-width: 100%;
            border-radius: 12px;
            margin: 20px 0;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 30px 0;
        }
        
        .quote {
            padding: 20px 30px;
            background: rgba(106, 17, 203, 0.1);
            border-left: 4px solid var(--accent);
            border-radius: 0 10px 10px 0;
            margin: 25px 0;
            font-style: italic;
            color: var(--text-light);
        }
        
        .tags {
            display: flex;
            gap: 10px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .tag {
            background: rgba(255, 255, 255, 0.1);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: var(--text-lighter);
        }
        
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: transparent;
            z-index: 1000;
        }
        
        .progress-bar {
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            width: 0%;
            transition: width 0.2s ease-out;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            font-size: 1.2rem;
            color: var(--text-lighter);
        }
        
        .loading i {
            font-size: 2rem;
            margin-bottom: 15px;
            display: block;
        }
        
        /* 视频容器 */
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            height: 0;
            margin: 20px 0;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        /* 分类导航 - 修改为自适应布局 */
        .category-nav {
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .category-btn {
            padding: 10px 20px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-light);
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .category-btn:hover, 
        .category-btn.active {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border-color: transparent;
        }
        
        .subcategory-container {
            margin-bottom: 40px;
        }
        
        .subcategory-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .subcategory-title {
            font-size: 1.8rem;
            background: linear-gradient(45deg, var(--accent), #ff9e7d);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-right: 20px;
        }
        
        /* 社交链接动画 */
        .social-links {
            position: absolute;
            bottom: 40px;
            right: 0;
            display: flex;
            gap: 20px;
            z-index: 10;
        }
        
        .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1.2rem;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .social-links a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            z-index: -1;
            transition: height 0.4s ease;
        }
        
        .social-links a:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
            color: white;
            border-color: transparent;
        }
        
        .social-links a:hover::before {
            height: 100%;
        }
        
        /* 关于页面样式 */
        .about-container {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }
        
        .about-image {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .about-content h2 {
            font-size: 2.2rem;
            margin-bottom: 20px;
            color: #fff;
            position: relative;
            padding-left: 15px;
        }
        
        .about-content h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12px;
            width: 6px;
            height: 25px;
            background: var(--accent);
            border-radius: 3px;
        }
        
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .skill-item {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 10px;
            border-left: 3px solid var(--primary);
        }
        
        /* 联系表单 */
        .contact-form {
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-light);
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: white;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: rgba(106, 17, 203, 0.5);
            box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
        }
        
        .submit-btn {
            padding: 14px 30px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: var(--transition);
            display: block;
            margin: 20px auto 0;
            width: 200px;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(106, 17, 203, 0.3);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            .blog-title {
                font-size: 2.5rem;
            }
            
            .blog-content {
                padding: 25px;
            }
            
            .image-grid {
                grid-template-columns: 1fr;
            }
            
            .nav-links {
                gap: 15px;
            }
            
            .blog-list {
                grid-template-columns: 1fr;
            }
            
            .about-container {
                grid-template-columns: 1fr;
            }
            
            .social-links {
                position: relative;
                bottom: 0;
                margin-top: 40px;
                justify-content: center;
                width: 100%;
            }
            
            /* 移动端分类导航优化 */
            .category-nav {
                justify-content: flex-start;
                padding: 0 15px;
            }
            
            .category-btn {
                padding: 8px 15px;
                font-size: 0.85rem;
            }
        }
        
        @media (max-width: 480px) {
            .nav-links {
                display: none;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .cta-buttons {
                flex-direction: column;
            }
            
            .blog-title {
                font-size: 2rem;
            }
            
            .blog-meta {
                flex-direction: column;
                gap: 5px;
            }
            
            .subcategory-title {
                font-size: 1.5rem;
            }
        }
        
        /* 动画定义 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(5deg);
            }
            100% {
                transform: translateY(0px) rotate(0deg);
            }
        }
        
        @keyframes gradientShift {
            0% {
                background-position: 10% 20%;
            }
            50% {
                background-position: 90% 80%;
            }
            100% {
                background-position: 10% 20%;
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.05);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 0.8;
            }
        }
        
        /* 粒子样式 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.5);
            animation: float 8s infinite ease-in-out;
        }
        
        .particle:nth-child(3n+1) {
            background: rgba(106, 17, 203, 0.3);
        }
        
        .particle:nth-child(3n+2) {
            background: rgba(37, 117, 252, 0.3);
        }
        
        .particle:nth-child(3n+3) {
            background: rgba(255, 107, 107, 0.3);
        }
        
        /* 主题切换器 */
        .style-switcher {
            position: fixed;
            top: 100px;
            right: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 1000;
        }
        
        .style-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            transition: transform 0.3s ease;
        }
        
        .style-btn:hover {
            transform: scale(1.1);
        }
        
        .style-btn:nth-child(1) { background: linear-gradient(135deg, #6a11cb, #2575fc); }
        .style-btn:nth-child(2) { background: linear-gradient(135deg, #ff416c, #ff4b2b); }
        .style-btn:nth-child(3) { background: linear-gradient(135deg, #11998e, #38ef7d); }
        
        /* 主题样式 */
        .theme-1 {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --accent: #ff6b6b;
        }
        
        .theme-2 {
            --primary: #ff416c;
            --secondary: #ff4b2b;
            --accent: #38ef7d;
        }
        
        .theme-3 {
            --primary: #11998e;
            --secondary: #38ef7d;
            --accent: #ff6b6b;
        }
        
        /* 博客切换动画 */
        .blog-enter {
            animation: slideIn 0.6s ease forwards;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 模拟图片 */
        .img-placeholder {
            width: 100%;
            height: 300px;
            background: linear-gradient(45deg, #2c2c54, #40407a);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-lighter);
            font-size: 1.2rem;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="theme-1">
    <!-- 阅读进度条 -->
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    
    <div class="style-switcher">
        <div class="style-btn" onclick="changeTheme('theme-1')"></div>
        <div class="style-btn" onclick="changeTheme('theme-2')"></div>
        <div class="style-btn" onclick="changeTheme('theme-3')"></div>
    </div>
    
    <div class="container">
        <nav>
            <div class="logo" onclick="showHome()">DevBlog</div>
            <div class="nav-links">
                <a href="#" onclick="showHome()">首页</a>
                <a href="#" onclick="showBlogList()">博客</a>
                <a href="#" onclick="showAbout()">关于</a>
                <a href="#" onclick="showContact()">联系</a>
            </div>
        </nav>
        
        <!-- 首页内容 -->
        <section class="hero" id="home">
            <div class="hero-content">
                <h1>探索创意<br>分享知识</h1>
                <p>欢迎来到十叁的个人博客空间，这里记录了我的技术探索、项目经验和生活思考。作为一名高级嵌入式开发者，我热衷于设计和前沿技术的见解。</p>
                <div class="cta-buttons">
                    <button class="btn btn-primary" onclick="showBlogList()">
                        <i class="fas fa-book-open"></i> Look
                    </button>
                    <button class="btn btn-secondary" onclick="showAbout()">
                        <i class="fas fa-user"></i> About
                    </button>
                </div>
            </div>
            
            <div class="particles" id="particles"></div>
        </section>
        
        <!-- 博客列表页 -->
        <section class="blog-container" id="blog-list" style="display: none;">
            <button class="btn btn-secondary back-btn" onclick="showHome()">
                <i class="fas fa-arrow-left"></i> 返回首页
            </button>
            
            <div class="blog-header">
                <h1 class="blog-title">所有博客文章</h1>
                <p style="text-align: center; color: var(--text-lighter);">探索知识、经验与思考</p>
                
                <!-- 分类导航 -->
                <div class="category-nav" id="categoryNav">
                    <div class="category-btn active" data-category="all">全部</div>
                    <div class="category-btn" data-category="学习">学习</div>
                    <div class="category-btn" data-category="工作">工作</div>
                    <div class="category-btn" data-category="生活">生活</div>
                </div>
            </div>
            
            <div class="blog-content" id="blogListContainer">
                <!-- 内容将由JavaScript动态生成 -->
            </div>
        </section>
        
        <!-- 博客内容页 -->
        <section class="blog-container" id="blog-content" style="display: none;">
            <button class="btn btn-secondary back-btn" onclick="showBlogList()">
                <i class="fas fa-arrow-left"></i> 返回列表
            </button>
            
            <div class="blog-header">
                <h1 class="blog-title" id="blogContentTitle"></h1>
                <div class="blog-meta" id="blogContentMeta"></div>
            </div>
            
            <div class="blog-content" id="blogContentBody"></div>
        </section>
        
        <!-- 关于页面 -->
        <section class="blog-container" id="about" style="display: none;">
            <button class="btn btn-secondary back-btn" onclick="showHome()">
                <i class="fas fa-arrow-left"></i> 返回首页
            </button>
            
            <div class="blog-header">
                <h1 class="blog-title">关于我</h1>
                <p style="text-align: center; color: var(--text-lighter);">探索我的技能、经验和热情</p>
            </div>
            
            <div class="blog-content">
                <div class="about-container">
                    <div class="about-image">
                    <div class="img-placeholder" style="background-image: url('resources/me1.jpg');">
                    </div>
                    <div class="img-placeholder" style="background-image: url('resources/me2.jpg');">
                    </div>
                    </div>
                    
                    <div class="about-content">
                        <h2>个人简介</h2>
                        <p>我是十叁，是一名嵌入式开发者，拥有超过7年的开发经验，我热衷于探索新技术并将其应用于实际问题解决中。</p>
                        
                        
                        <h2>专业技能</h2>
                        <div class="skills-grid">
                            <div class="skill-item">
                                <h3>语言/框架</h3>
                                <p>C/C++, Java, Python, OpenCL/GL</p>
                            </div>
                            <div class="skill-item">
                                <h3>平台</h3>
                                <p>Linux, Qnx, Android</p>
                            </div>
                            <div class="skill-item">
                                <h3>协议/标准</h3>
                                <p>UART, IIC, CAN, TCP/IP, JT808, JT1242, GB38186</p>
                            </div>
                            <div class="skill-item">
                                <h3>工具</h3>
                                <p>GDB, Perf, Pidstad, IDA, Git, Svn, VS, Keil</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="margin-top: 50px;">
                    <h2>职业经历</h2>
                    <p>在过去的职业生涯中，多次主导以下项目开发:商用车ADAS基线开发，商用车AVM系统开发，商用车CMBS系统开发，乘用车算法SDK集成封装。且商用车ADAS在2025年卖出10W+。：</p>
                    
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>高级算法集成工程师</strong> - ArcSoft. (2025.4-至今)</li>
                        <li style="margin-bottom: 10px;"><strong>高级嵌入式软件工程师</strong> - HikVison. (2021.7-2025.4)</li>
                    </ul>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>团队协作</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>技术分享</span>
                        </div>
                    </div>
                    
                    <h2>个人理念</h2>
                    <div class="quote">
                        "我相信技术应该服务于人，而不是相反。优秀的软件应该简化生活，解决问题，并为用户创造价值。"
                    </div>
                    
                    <p>在我的工作中，我始终坚持三个核心原则：代码质量、用户体验和持续学习。我认为技术行业最令人兴奋的地方在于它的不断演进，这要求我们保持好奇心和学习的热情。</p>
                </div>
            </div>
        </section>
        
        <!-- 联系页面 -->
        <section class="blog-container" id="contact" style="display: none;">
            <button class="btn btn-secondary back-btn" onclick="showHome()">
                <i class="fas fa-arrow-left"></i> 返回首页
            </button>
            
            <div class="blog-header">
                <h1 class="blog-title">联系我</h1>
                <p style="text-align: center; color: var(--text-lighter);">有任何问题或建议？请随时联系</p>
            </div>
            
            <div class="contact-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" placeholder="您的姓名">
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" placeholder="您的邮箱">
                </div>
                
                <div class="form-group">
                    <label for="subject">主题</label>
                    <input type="text" id="subject" placeholder="消息主题">
                </div>
                
                <div class="form-group">
                    <label for="message">消息</label>
                    <textarea id="message" placeholder="请输入您的消息..." rows="5"></textarea>
                </div>
                
                <button class="submit-btn">发送消息</button>
            </div>
        </section>
    </div>
    
    <script>
        // 博客数据结构（支持多级分类）
        const blogData = [
            {
                id: "learning-embedded",
                title: "嵌入式系统学习笔记",
                date: "2024-01-15",
                readTime: "12分钟",
                mainCategory: "学习",
                subCategory: "嵌入式开发",
                image: "https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
                tags: ["嵌入式", "C语言", "单片机", "硬件"],
                content: `
                    <p>嵌入式系统是计算机技术的一个重要分支，它融合了硬件设计和软件开发。今天我想分享我在学习嵌入式系统过程中的经验和心得。</p>
                    
                    <h2>嵌入式系统的核心概念</h2>
                    <p>嵌入式系统是专为特定任务设计的计算机系统，通常具有实时性要求。与通用计算机不同，嵌入式系统往往资源受限，需要高度优化。</p>
                    
                    <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                        <span>嵌入式开发板</span>
                    </div>
                    
                    <p>学习嵌入式开发需要掌握以下核心技能：</p>
                    
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>C/C++编程</strong> - 嵌入式开发的主要语言</li>
                        <li style="margin-bottom: 10px;"><strong>硬件接口</strong> - GPIO, I2C, SPI, UART等</li>
                        <li style="margin-bottom: 10px;"><strong>实时操作系统</strong> - FreeRTOS, Zephyr等</li>
                        <li><strong>低功耗设计</strong> - 电池供电设备的关键</li>
                    </ul>
                    
                    <div class="quote">
                        "嵌入式开发是软件与硬件的完美结合，它让无形的代码在物理世界中产生真实的影响。"
                    </div>
                    
                    <h2>我的学习路径</h2>
                    <p>从零开始学习嵌入式开发，我遵循了以下路径：</p>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>Arduino入门</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1581091226033-d5c48150dbaa?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>STM32进阶</span>
                        </div>
                    </div>
                    
                    <ol style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;">从Arduino开始，学习基础电子和编程</li>
                        <li style="margin-bottom: 10px;">转向更专业的STM32平台，学习寄存器编程</li>
                        <li style="margin-bottom: 10px;">学习使用HAL库和CubeMX工具</li>
                        <li>深入研究FreeRTOS实时操作系统</li>
                    </ol>
                    
                    <h2>项目实践</h2>
                    <p>理论学习之后，实际项目是巩固知识的最佳方式：</p>
                    
                    <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1591799264318-7e6ef8ddb7ea?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                        <span>智能家居控制器项目</span>
                    </div>
                    
                    <p>我开发了一个基于ESP32的智能家居控制器，实现了以下功能：</p>
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;">温湿度监控</li>
                        <li style="margin-bottom: 10px;">远程灯光控制</li>
                        <li style="margin-bottom: 10px;">安防警报系统</li>
                        <li>能源消耗统计</li>
                    </ul>
                `
            },
            {                
                id: "embedded-linux",
                title: "嵌入式Linux开发入门",
                date: "2024-02-15",
                readTime: "15分钟",
                mainCategory: "学习",
                subCategory: "嵌入式开发",
                image: "https://example.com/linux-embedded.jpg",
                tags: ["Linux", "嵌入式", "驱动开发"],
                content: `<p>嵌入式Linux是物联网设备开发的核心技术...</p>`

            },
            {
                id: "learning-web",
                title: "现代Web开发技术栈",
                date: "2024-01-10",
                readTime: "10分钟",
                mainCategory: "学习",
                subCategory: "前端开发",
                image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
                tags: ["前端", "React", "JavaScript", "TypeScript"],
                content: `
                    <p>Web开发领域日新月异，掌握现代技术栈对于开发者至关重要。本文将分享当前最流行的Web开发技术栈。</p>
                    
                    <h2>核心框架选择</h2>
                    <p>2024年，三大前端框架依然主导市场：</p>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1579403124614-197f69d8187b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>React</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>Vue</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>Angular</span>
                        </div>
                    </div>
                    
                    <h2>全栈开发工具</h2>
                    <p>现代全栈开发通常包含以下技术组合：</p>
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>前端</strong>: React/Vue + TypeScript</li>
                        <li style="margin-bottom: 10px;"><strong>状态管理</strong>: Redux/Zustand</li>
                        <li style="margin-bottom: 10px;"><strong>后端</strong>: Node.js/Express或Next.js</li>
                        <li style="margin-bottom: 10px;"><strong>数据库</strong>: MongoDB/PostgreSQL</li>
                        <li><strong>部署</strong>: Vercel/Netlify</li>
                    </ul>
                    
                    <div class="quote">
                        "选择技术栈不是寻找最流行的，而是寻找最适合项目需求的。"
                    </div>
                `
            },
            {
                id: "work-design",
                title: "UI/UX设计原则与实践",
                date: "2024-01-05",
                readTime: "8分钟",
                mainCategory: "工作",
                subCategory: "设计思维",
                image: "https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
                tags: ["UI设计", "用户体验", "产品设计", "Figma"],
                content: `
                    <p>优秀的UI/UX设计是产品成功的关键因素之一。本文将分享我在工作中积累的设计原则和最佳实践。</p>
                    
                    <h2>核心设计原则</h2>
                    <p>无论设计什么产品，以下原则始终适用：</p>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>一致性设计</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1581276879432-15e50529f34b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>用户反馈</span>
                        </div>
                    </div>
                    
                    <ol style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>一致性</strong> - 保持界面元素和行为一致</li>
                        <li style="margin-bottom: 10px;"><strong>简洁性</strong> - 避免不必要的复杂性</li>
                        <li style="margin-bottom: 10px;"><strong>反馈</strong> - 及时提供操作反馈</li>
                        <li><strong>容错性</strong> - 允许用户犯错并轻松恢复</li>
                    </ol>
                `
            },
            {
                id: "life-photography",
                title: "街头摄影的艺术与技术",
                date: "2024-01-20",
                readTime: "15分钟",
                mainCategory: "生活",
                subCategory: "摄影",
                image: "https://images.unsplash.com/photo-1507699622108-4be3abd695ad?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
                tags: ["摄影", "艺术", "街头摄影", "索尼相机"],
                content: `
                    <p>街头摄影是捕捉城市生活瞬间的艺术形式。它要求摄影师具备敏锐的观察力和快速反应能力。</p>
                    
                    <h2>我的摄影装备</h2>
                    <p>经过多年实践，我精简了我的摄影装备：</p>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>索尼A7III</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>35mm定焦镜头</span>
                        </div>
                    </div>
                    
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>相机</strong>: 索尼A7III - 优秀的低光性能</li>
                        <li style="margin-bottom: 10px;"><strong>镜头</strong>: 35mm f/1.8 - 经典人文焦段</li>
                        <li style="margin-bottom: 10px;"><strong>配件</strong>: 备用电池、清洁套装</li>
                        <li><strong>后期</strong>: Lightroom + Photoshop</li>
                    </ul>
                    
                    <div class="quote">
                        "摄影不是关于设备，而是关于你如何观察世界。最好的相机是你随身携带的那一个。"
                    </div>
                `
            },
            {
                id: "life-travel",
                title: "日本关西文化之旅",
                date: "2024-01-25",
                readTime: "18分钟",
                mainCategory: "生活",
                subCategory: "旅游",
                image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80",
                tags: ["日本", "旅游", "文化", "关西"],
                content: `
                    <p>关西地区是日本文化的心脏地带，拥有京都、大阪、奈良等历史名城。这次旅行让我深入了解了日本的传统文化与现代生活的完美融合。</p>
                    
                    <h2>行程亮点</h2>
                    <p>两周的关西之旅，这些地方最令我难忘：</p>
                    
                    <div class="image-grid">
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>京都伏见稻荷大社</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1593705114382-83c0c8d8a908?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>奈良公园</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1593705114382-83c0c8d8a908?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>大阪城</span>
                        </div>
                        <div class="img-placeholder" style="background-image: url('https://images.unsplash.com/photo-1576675466969-38eeae4b41e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80');">
                            <span>神户港</span>
                        </div>
                    </div>
                    
                    <h2>旅行小贴士</h2>
                    <p>对于计划前往关西的旅行者，我的建议：</p>
                    <ul style="margin: 20px 0 20px 30px; color: var(--text-light);">
                        <li style="margin-bottom: 10px;"><strong>交通</strong>: 购买ICOCA卡，方便乘坐各种交通工具</li>
                        <li style="margin-bottom: 10px;"><strong>住宿</strong>: 京都选择传统町屋，大阪选择市中心酒店</li>
                        <li style="margin-bottom: 10px;"><strong>美食</strong>: 不要错过大阪的章鱼烧和京都的怀石料理</li>
                        <li><strong>礼仪</strong>: 学习基本的日语礼貌用语，尊重当地文化</li>
                    </ul>
                `
            }
        ];

        // 创建优化的粒子背景
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // 随机属性
                const size = Math.random() * 15 + 5;
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                const delay = Math.random() * 5;
                const duration = Math.random() * 8 + 8;
                const blur = Math.random() * 5 + 2;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`;
                particle.style.opacity = Math.random() * 0.5 + 0.3;
                particle.style.filter = `blur(${blur}px)`;
                
                container.appendChild(particle);
            }
        }
        
        // 主题切换功能
        function changeTheme(theme) {
            document.body.className = theme;
        }
        
        // 页面切换功能
        function showHome() {
            document.getElementById('home').style.display = 'flex';
            document.getElementById('blog-list').style.display = 'none';
            document.getElementById('blog-content').style.display = 'none';
            document.getElementById('about').style.display = 'none';
            document.getElementById('contact').style.display = 'none';
            window.scrollTo(0, 0);
        }
        
        function showBlogList() {
            document.getElementById('home').style.display = 'none';
            document.getElementById('blog-list').style.display = 'block';
            document.getElementById('blog-content').style.display = 'none';
            document.getElementById('about').style.display = 'none';
            document.getElementById('contact').style.display = 'none';
            window.scrollTo(0, 0);
            
            // 渲染博客列表
            renderBlogList('all');
        }
        
        function showBlogContent(blogId) {
            document.getElementById('home').style.display = 'none';
            document.getElementById('blog-list').style.display = 'none';
            document.getElementById('blog-content').style.display = 'block';
            document.getElementById('about').style.display = 'none';
            document.getElementById('contact').style.display = 'none';
            window.scrollTo(0, 0);
            
            // 渲染博客内容
            renderBlogContent(blogId);
        }
        
        function showAbout() {
            document.getElementById('home').style.display = 'none';
            document.getElementById('blog-list').style.display = 'none';
            document.getElementById('blog-content').style.display = 'none';
            document.getElementById('about').style.display = 'block';
            document.getElementById('contact').style.display = 'none';
            window.scrollTo(0, 0);
        }
        
        function showContact() {
            document.getElementById('home').style.display = 'none';
            document.getElementById('blog-list').style.display = 'none';
            document.getElementById('blog-content').style.display = 'none';
            document.getElementById('about').style.display = 'none';
            document.getElementById('contact').style.display = 'block';
            window.scrollTo(0, 0);
        }
        
        // 渲染博客列表（带分类）
        function renderBlogList(category) {
            const container = document.getElementById('blogListContainer');
            container.innerHTML = '';
            
            // 按主分类分组
            const groupedBlogs = {};
            blogData.forEach(blog => {
                // 添加分类筛选逻辑
                if (category !== 'all' && blog.mainCategory !== category) return;
                
                if (!groupedBlogs[blog.mainCategory]) {
                    groupedBlogs[blog.mainCategory] = {};
                }
                
                if (!groupedBlogs[blog.mainCategory][blog.subCategory]) {
                    groupedBlogs[blog.mainCategory][blog.subCategory] = [];
                }
                
                groupedBlogs[blog.mainCategory][blog.subCategory].push(blog);
            });
            
            // 渲染分组内容
            for (const mainCategory in groupedBlogs) {
                const categorySection = document.createElement('div');
                categorySection.className = 'subcategory-container';
                
                const header = document.createElement('div');
                header.className = 'subcategory-header';
                
                const title = document.createElement('h2');
                title.className = 'subcategory-title';
                title.textContent = mainCategory;
                
                header.appendChild(title);
                categorySection.appendChild(header);
                
                for (const subCategory in groupedBlogs[mainCategory]) {
                    const subCategoryTitle = document.createElement('h3');
                    subCategoryTitle.textContent = subCategory;
                    subCategoryTitle.style.fontSize = '1.5rem';
                    subCategoryTitle.style.marginBottom = '20px';
                    subCategoryTitle.style.color = 'var(--text-light)';
                    categorySection.appendChild(subCategoryTitle);
                    
                    const blogGrid = document.createElement('div');
                    blogGrid.className = 'blog-list';
                    
                    groupedBlogs[mainCategory][subCategory].forEach(blog => {
                        const blogCard = document.createElement('div');
                        blogCard.className = 'blog-card';
                        blogCard.innerHTML = `
                            <div class="card-image" style="background-image: url('${blog.image}')"></div>
                            <div class="card-content">
                                <span class="card-tag">${blog.subCategory}</span>
                                <h3 class="card-title">${blog.title}</h3>
                                <p class="card-excerpt">${blog.content.substring(0, 100)}...</p>
                                <div class="card-meta">
                                    <span><i class="far fa-calendar"></i> ${formatDate(blog.date)}</span>
                                    <span><i class="far fa-clock"></i> ${blog.readTime}</span>
                                </div>
                            </div>
                        `;
                        
                        blogCard.addEventListener('click', () => showBlogContent(blog.id));
                        blogGrid.appendChild(blogCard);
                    });
                    
                    categorySection.appendChild(blogGrid);
                }
                
                container.appendChild(categorySection);
            }
            
            // 如果没有内容，显示提示
            if (Object.keys(groupedBlogs).length === 0) {
                container.innerHTML = `
                    <div class="no-results" style="text-align: center; padding: 50px;">
                        <i class="fas fa-inbox" style="font-size: 4rem; margin-bottom: 20px; color: var(--text-lighter);"></i>
                        <h3 style="color: var(--text-light);">暂无内容</h3>
                        <p style="color: var(--text-lighter); margin-top: 10px;">该分类下暂无博客文章</p>
                    </div>
                `;
            }
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateString).toLocaleDateString('zh-CN', options);
        }
        
        // 渲染博客内容
        function renderBlogContent(blogId) {
            const blog = blogData.find(b => b.id === blogId);
            if (!blog) return;
            
            document.getElementById('blogContentTitle').textContent = blog.title;
            
            document.getElementById('blogContentMeta').innerHTML = `
                <span><i class="far fa-calendar"></i> ${formatDate(blog.date)}</span>
                <span><i class="far fa-clock"></i> ${blog.readTime}</span>
                <span><i class="far fa-folder"></i> ${blog.mainCategory} / ${blog.subCategory}</span>
            `;
            
            document.getElementById('blogContentBody').innerHTML = blog.content;
            
            // 添加标签
            const tagsContainer = document.createElement('div');
            tagsContainer.className = 'tags';
            blog.tags.forEach(tag => {
                const tagElement = document.createElement('span');
                tagElement.className = 'tag';
                tagElement.textContent = tag;
                tagsContainer.appendChild(tagElement);
            });
            
            document.getElementById('blogContentBody').appendChild(tagsContainer);
        }
        
        // 阅读进度条
        function updateProgressBar() {
            const progressBar = document.getElementById('progressBar');
            const windowHeight = window.innerHeight;
            const fullHeight = document.body.scrollHeight;
            const scrolled = window.scrollY;
            const progress = (scrolled / (fullHeight - windowHeight)) * 100;
            progressBar.style.width = progress + '%';
        }
        
        // 初始化
        window.onload = function() {
            createParticles();
            
            // 设置滚动监听
            window.addEventListener('scroll', updateProgressBar);
            
            // 为所有按钮添加点击动画
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    // 创建涟漪效果
                    const ripple = document.createElement('span');
                    ripple.classList.add('ripple');
                    this.appendChild(ripple);
                    
                    // 获取点击位置
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    ripple.style.left = `${x}px`;
                    ripple.style.top = `${y}px`;
                    
                    // 移除涟漪
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                });
            });
            
            // 分类导航事件
            const categoryBtns = document.querySelectorAll('.category-btn');
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有active类
                    categoryBtns.forEach(b => b.classList.remove('active'));
                    // 添加active到当前按钮
                    this.classList.add('active');
                    
                    // 获取分类
                    const category = this.dataset.category;
                    
                    // 渲染对应分类的博客列表
                    renderBlogList(category);
                });
            });
            
            // 表单提交事件
            document.querySelector('.submit-btn').addEventListener('click', function(e) {
                e.preventDefault();
                alert('消息已发送！感谢您的联系。');
                showHome();
            });
        };
    </script>
</body>
</html>